<template>
  <div class="app_content_container">
    <Breadcrumb
      :items="[
        { label: '云主机', path: '/computing-mgmt/vm-list' },
        '蓝鲸执行记录',
        name,
      ]"
    />
    <LayoutCard title="应用列表" widthL="450px" marginRight="0" style="padding: 0 16px">
      <BaseTable
        ref="baseTableRef"
        :apiUrl="getVmList"
        :columns="columns"
        isPadding0
        :isShowAddBtn="false"
        :isShowPagination="false"
        height="calc(100vh - 178px)"
      />
      <template #content>
        <div class="code_edit">
          <h2>执行记录</h2>
          <code-editor v-model="logValue" />
        </div>
      </template>
    </LayoutCard>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import TagStatus from "@/components/TagStatus/index.vue";
import CodeEditor from "../common/CodeEditor.vue";

const route = useRoute();
const { name } = route.query;
const logValue = ref("sfasfsaf,ggggggggggg\n ggggggggggg\n fhjsahfjsajfbsabjbf");
//    logValue() {
//       const jobLogs = []
//       for (let i = 0; i < this.jobLogData.length; i++) {
//         jobLogs.push(this.jobLogData[i].log)
//       }
//       return jobLogs.join('')
//     }
const columns = [
  {
    title: "步骤",
    dataIndex: "cpuCores",
  },
  {
    title: "耗时",
    dataIndex: "memory",
  },
  {
    title: "执行情况",
    render: ({ record }) => h(TagStatus, { type: record.vmStatus }),
    width: 100,
  },
];
</script>

<style lang="scss" scoped>
.code_edit {
  height: calc(100vh - 134px);
  border: 1px solid #000;
  h2 {
    padding: 16px 48px;
    background: #000;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
  }
}
.layout_card {
  border: none;
}
:deep(.garco-layout-content) {
  padding: 0;
}
:deep(.garco-layout-sider) {
  padding: 0 8px;
}
</style>
